<!DOCTYPE html>
<html lang="zh-cmn-Has-ZN">
<head>
    <meta charset="UTF-8">
    <title>Detail Info</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="css/detail.css">
</head>
<body>
    <div id="container">
        <div class="topPart">
            <div class="back_btn"><a href="./index.html"><img src="img/back.png" style="height: 42px;"></a></div>
            <div id="count"></div>
        </div>
        <div class="bottomPart">
            <div class="leftPart">
                <div id="gender" style="width: 420px;height:280px;"></div>
                <div id="fans" style="width: 420px;height:280px;"></div>
            </div>
            <div class="rightPart">
                <div id="top"><div class="title">粉丝最多的相关用户</div></div>
                <div id="new"><div class="title">最近参与讨论的用户</div></div>
            </div>
        </div>
    </div>
</body>
<script type="application/javascript">

    var topMap = new Map();
    var recentMap = new Map();

    $(function () {
       var key = getQueryString("key");
       //性别数据
        $.ajax({
            url:"http://localhost:8080/keyword/"+key+"/gender",
            success:function(result){
                var arr = JSON.parse(result);
                var total = arr[0][1] + arr[1][1] ;
                $("#count").html("目前共有关于 "+decodeURI(key)+" 的用户数据 <span style='color: #7cd07b'>"+total+" </span>条");
                generateGenderChart(arr[1][1],arr[0][1]);
            }});

        //粉丝数据
        $.ajax({
            url:"http://localhost:8080/keyword/"+key+"/followers",
            success:function(result){
                var arr2 = JSON.parse(result);
                generateFansChart(arr2);
            }});

        //top10
        $.ajax({
            url:"http://localhost:8080/keyword/"+key+"/top?page=1&size=10",
            success:function(result){
                showTop(result.content);
            }});
        //recent
        $.ajax({
            url:"http://localhost:8080/keyword/"+key+"/recent",
            success:function(result){
                var arr3 = JSON.parse(result);
                showRecent(arr3);
            }});
    });

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return r[2]; return null;
    }

    function generateGenderChart(male,female) {
        var myChart = echarts.init(document.getElementById('gender'));
        var option = {
            title : {
                text: '微博用户性别比例',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color:['#30a1dd', '#e263af'],
            series : [
                {
                    name: '性别',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:male, name:'男'},
                        {value:female, name:'女'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

    function generateFansChart(arr) {
        var myChart = echarts.init(document.getElementById('fans'));
        var option = {
            title : {
                text: '微博用户粉丝状况',
                x:'center'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: [arr[0].description, arr[1].description, arr[2].description, arr[3].description, arr[4].description, arr[5].description],
                splitLine:{
                    show:false
                },
                axisLabel:{
                    interval:0,//横轴信息全部显示
                    rotate:-20//-30度角倾斜显示
                }
            },
            yAxis: {
                type: 'value',
                splitLine:{
                    show:false
                }
            },
            color:['#7fd07f'],
            series: [{
                data: [arr[0].count, arr[1].count, arr[2].count, arr[3].count, arr[4].count, arr[5].count],
                type: 'bar'
            }]
        };

        myChart.setOption(option);
    }

    function showTopInfo(e) {
        var obj = topMap.get(e);
        console.log(obj);
        layer.open({
            title: false,
            closeBtn: 0,
            shadeClose: true,
            type: 1,
            area: ['600px', '500px'],
            content: "<div class='weibo_main'>" +
            "<a class='user' href='https://weibo.com/u/"+obj.uid+"'>"+obj.nickName+"</a><br/><br/>"
            +obj.originText+"<div class='source'> —— "+obj.source+"</div></div>"
        });
    }

    function showNewInfo(e) {
        var obj = recentMap.get(e);
        console.log(obj);
        layer.open({
            title: false,
            closeBtn: 0,
            shadeClose: true,
            type: 1,
            area: ['600px', '500px'],
            content: "<div class='weibo_main'>" +
            "<a class='user' href='https://weibo.com/u/"+obj.uid+"'>"+obj.nick_name+"</a><br/><br/>"
            +obj.origin_text+"<div class='source'> —— "+obj.source+"</div></div>"
        });
    }

    function showTop(arr) {
        arr.forEach(function (e) {
           topMap.set(e.uid,e);
           $('#top').append("<div class='card top' onclick=\"showTopInfo(\'"+e.uid+"\')\">" +
               "<a data='https://weibo.com/u/"+e.uid+"'><img class='avatar' src='"+e.avatar+"'></a>" +
               "<div class='info'><span>"+e.nickName+"</span><span class='fans_info'>粉丝: "+e.followersCount+"</span></div></div>");
        });
    }
    
    function showRecent(arr) {
        arr.forEach(function (e) {
            console.log(e);
            recentMap.set(e.uid,e);
            $('#new').append("<div class='card new'  onclick=\"showNewInfo(\'"+e.uid+"\')\">" +
                "<a data='https://weibo.com/u/"+e.uid+"'><img class='avatar' src='"+e.avatar+"'></a>" +
                "<div class='info'><span>"+e.nick_name+"</span><span class='fans_info'>"+formatDateTime(e.crt_time)+"</span></div></div>");
        });
    }

    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    }
</script>
</html>